﻿@model List<OPLWeb.Models.NewsUpdate>
<div id="carousel">
    <div id="content-main-feature">
        @Html.Partial("SlideImageContainer", Model.First())
    </div>
    <div id="carousel-sidebar">
        <ul id="carousel-navigation">
            @foreach (var item in Model)
            {
                <li id="@item.ID" class="first"><a href="javascript:void(0);">
                    <div>
                        <p>
                            @item.Headline</p>
                        <p style="color: White;">
                            @item.Title</p>
                    </div>
                </a></li> 
            }
        </ul>
        <div id="carousel-pagination" style="display: none;">
            <div id="carousel-pagination-links">
                <a href="#"><span>1</span></a> <a href="#"><span>2</span></a> <a href="#"><span>3</span></a>
            </div>
            <div id="carousel-pagination-timer">
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#carousel-navigation > li').live('click', function () {
            $("#content-main-feature").fadeOut();
            $.ajax({
                type: "GET",
                url: '@Url.Content("~/Home/GetNewsItem")',
                data: { id: $(this).attr('id') },
                contentType: "application/json; charset=utf-8",
                cache: false,
                dataType: "html",
                success: function (result) {
                    $("#content-main-feature").fadeIn().html(result);
                },
                error: function (result) {
                }
            });
        });
    });
</script>
